Wrapper HTML

Description

HTML content to wrap around the ViewBox Layout.

Discussion

The Wrapper HTML property defines the HTML content to wrap around the ViewBox.

The Wrapper HTML must include a div element with an attribute called a5-layout-target and the value of this attribute must be set to true. This is the div where the ViewBox layout will be injected

For example:

<div a5-layout-target="true"></div>

This property is shown when Use wrapper is enabled.

Adding a Header and Footer

A header and footer can be added by placing HTML above and below the element where the ViewBox is rendered. For example:

<div style="display: flex; flex-direction:column; height: 100%;">
    <div>Header</div>
    <div a5-layout-target="true" style="flex: 1 1;"></div>
    <div>Footer</div>
</div>

Adding a Fixed Header

If the ViewBox allows Drag scrolling with the Drag scrolling axis set to "Veritcal", the Wrapper HTML is rendered fixed on screen. The ViewBox scrolls within the wrapper HTML.

ViewBox Properties

For example, consider the following ViewBox based on the AADemo-Northwind sample connection string. The CustomerID, CompanyName, Address, City, and Country fields are retrieved in the data source definition for the ViewBox.

ViewBox Data Source

The ViewBox's layout is shown below. Each field is placed in a Column LayoutContainer with a Column break after each field except the last one. The entire layout is wrapped in a ListRowContainer. The ListRowContainer styles each record shown in the ViewBox as a List row, which includes row highlighting on mouse hover and select.

ViewBox Layout

The Wrapper HTML adds a header to the ViewBox:

<div style="display:flex; flex-direction:column; height:100%;">
<div class="header">
    <div class="headerLabel">Customer ID</div>
    <div class="headerLabel">Customer Name</div>
    <div class="headerLabel">Address</div>
    <div class="headerLabel">City</div>
    <div class="headerLabel">Country</div>
</div>
<div a5-layout-target="true" style="flex: 1 1;"></div>
</div>

Note the wrapping div with a style set to display:flex; flex-direction:column; height:100%; as well as the style set on the div where the ViewBox will be rendered. This CSS works with the Drag scrolling settings to render the fixed header.

The HTML includes two classes used to style the header, header and headerLabel, which are locally CSS classes defined in the ViewBox CSS:

.header {
    display:inline-table;
    width:100%;
    height: 25px;
    margin-top:25px;
    background: white;
    border-bottom: 2px solid grey;
    box-sizing: border-box;
}
.headerLabel {
    display: table-cell;
    width: 20%;
    font-weight: bold;
    vertical-align: top;
	margin-left:10px;
}

This CSS formats the header fill the width of the screen. It also styles the header as bold text with a border along the bottom, as shown in the image below.

The Wrapper HTML header for the ViewBox

You can download the component used to create the above example here: Download component